<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link th:href="@{/ifavicon.ico}" rel="shortcut icon"/>
    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
    <title>商品列表</title>
</head>
<body>
<ul class="nav">
    <li class="nav-item">
        <a class="nav-link active" href="javascript:void (0);">商品列表</a>
    </li>
</ul>
<table class="table">
    <thead>
    <tr>
        <th scope="col">商品ID</th>
        <th scope="col">商品名称</th>
        <th scope="col">商品描述</th>
        <th scope="col">价格</th>
        <th scope="col">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="goods:${goodsList}">
        <th scope="row" th:text="${goods.id}">商品ID</th>
        <td th:text="${goods.name}">商品名称</td>
        <td th:text="${goods.description}">商品描述</td>
        <td th:text="${goods.price}">价格</td>
        <td>
<!--            <a class="btn btn-primary" th:href="@{'/goods/' + ${goods.id} + '/detail'}">立即购买</a>-->
            <button type="button" class="btn btn-primary" th:onclick="goodsDetail([[${goods.id}]])">立即购买</button>
        </td>
    </tr>
    </tbody>
</table>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script th:inline="javascript">
    let ctx = [[@{/}]];

    function goodsDetail(goodsId) {
        let detailUrl = ctx + 'rabbitmq/goods/' + goodsId + '/detail';
        window.location.href = detailUrl;
    }
</script>
</body>
</html>